<template>
  <el-tree
    :props="props"
    :load="loadNode"
    @node-click="nodeClick"
    lazy
    show-checkbox
    accordion
  >
  </el-tree>
</template>
<script>
import { selectItemCategory } from "@/http/index.js";
export default {
  name: "TreeProduct",
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // return resolve([{ name: "region" }]);
        selectItemCategory().then((res) => {
          //   console.log(res, "树的数据");
          if (res.data.status == 200) {
            return resolve(res.data.result);
          } else {
            return resolved([]);
          }
        });
      }

      if (node.level >= 1) {
        // console.log(node, node.data, "这里面是子数据");

        selectItemCategory({ type: node.data.cid }).then((res) => {
          if (res.data.status == 200) {
            // console.log(res, "树的数据");
            return resolve(res.data.result);
          } else {
            return resolve([]);
          }
        });
      }

      //   setTimeout(() => {
      //     const data = [
      //       {
      //         name: "leaf",
      //         // leaf: true,
      //       },
      //       {
      //         name: "zone",
      //       },
      //     ];

      //     resolve(data);
      //   }, 500);
    },
    nodeClick(data, node) {
      //   console.log(data, "树上面的数据");
      this.$emit("sendTreeData", data);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
